<template>
  <Dialog :isShow="isShow" :title="title" @hidden="cancel" @ensure="ensure" @cancel="cancel">
    <template #content>
      <form class="sui-form form-horizontal">
        <!-- 收货人 -->
        <div class="control-group">
          <label class="control-label">收货人：</label>
          <div class="controls"><input type="text" class="input-medium" v-model="formInput.consignee" /></div>
        </div>
        <!-- 联系电话 -->
        <div class="control-group">
          <label class="control-label">联系电话：</label>
          <div class="controls"><input type="text" class="input-medium" v-model="formInput.phoneNum" /></div>
        </div>
        <!-- 所在地区 -->
        <div class="control-group">
          <label class="control-label">所在地区：</label>
          <div class="controls">
            <select style="width: 100px" v-model="formInput.regionId">
              <option value="" selected>请选择地区</option>
              <option :value="item.id" v-for="item in baseRegion" :key="item.id" @change="getProvince(item.id)">{{ item.regionName }}</option>
            </select>
            <select style="width: 100px" v-model="formInput.provinceId">
              <option value="">请选择地区</option>
              <option :value="item.id" v-for="item in baseProvince" :key="item.id">{{ item.name }}</option>
            </select>
          </div>
        </div>
        <!-- 详细地址 -->
        <div class="control-group">
          <label class="control-label">详细地址：</label>
          <div class="controls"><input type="text" class="input-medium" style="width: 240px" v-model="formInput.userAddress" /></div>
        </div>
        <!-- 是否默认地址 -->
        <div class="control-group">
          <label class="control-label">是否默认地址：</label>
          <div class="controls"><input type="checkbox" name="default" v-model="formInput.isCheckDefault" /></div>
        </div>
      </form>
    </template>
  </Dialog>
</template>

<script>
import { findBaseRegionAPI, findBaseProvinceAPI, addUserAddressAPI, updataUserAddressAPI } from '@/api/myOrder.js'
export default {
  name: 'addressDialog',
  data() {
    return {
      // 插槽内容
      isShow: false,
      // 标题
      title: '收货地址',
      formInput: {
        regionId: '',
        provinceId: '',
      },
      // 地区
      baseRegion: [],
      baseProvince: [],
    }
  },
  watch: {
    'formInput.regionId'(newNum) {
      if (newNum === '') return (this.formInput.provinceId = '')
      this.getProvince()
    },
  },
  methods: {
    // 获取省份
    async getProvince() {
      // 如果没有id则为添加地址操作
      // 修改操作时，第一次不清除，之后清除
      if (this.formInput.id === this.addId) {
        this.formInput.provinceId = ''
      }
      this.addId = this.formInput.id
      console.log(this.addId)
      // 添加地址
      const data = await findBaseProvinceAPI(this.formInput.regionId)
      this.baseProvince = data
    },
    // 确定按钮 新增用户
    async ensure() {
      try {
        this.formInput.isDefault = this.formInput.isCheckDefault ? 1 : 0
        // 添加地址 或 修改地址
        this.formInput.id ? await updataUserAddressAPI(this.formInput) : await addUserAddressAPI(this.formInput)
        // 调用父组件方法
        this.$parent.getUserAddress()
        // 清除对话框
        this.cancel()
      } catch (error) {
        console.log('新增失败！')
      }
    },
    // 取消按钮
    // 清除对话框内容
    cancel() {
      this.isShow = false
      // 清除对话框
      this.formInput = {
        regionId: '',
        provinceId: '',
      }
      this.addId = undefined
    },
  },
  async created() {
    // 获取地区
    const data = await findBaseRegionAPI()
    this.baseRegion = data
  },
}
</script>

<style lang="scss" scoped>
.sui-form {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 18px;
  .control-group {
    margin-bottom: 18px;
    display: table;
    .control-label {
      width: 96px;
      text-align: right;
      display: table-cell;
      vertical-align: middle;
    }
    .controls {
      display: table-cell;
      padding-left: 3px;
      .input-medium {
        width: 200px;
        padding-left: 4px;
        padding-right: 4px;
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
        height: 18px;
        padding: 2px 4px;
        font-size: 12px;
        line-height: 18px;
        color: #555;
        border-radius: 2px;
        background-color: #fff;
        border: 1px solid #ccc;
        padding-top: 2px;
        padding-bottom: 2px;
        margin-left: 0;
        outline: none;
      }
      select {
        border: 1px solid #ccc;
        background-color: #fff;
        height: 24px;
        line-height: 24px;
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
        margin-right: 4px;
      }
    }
  }
}
</style>
